<template>
  <div>
    <div class="stricky-header stricked-menu main-menu">
      <div class="sticky-header__content"></div>
    </div>
    <section class="page-header">
      <div
        class="page-header__bg"
        style="
          background-image: url(assets/images/backgrounds/page-header-bg-1-1.jpg);
        "
      ></div>

      <div class="container">
        <h2>Products</h2>
        <ul class="thm-breadcrumb list-unstyled">
          <li>
            <a
              href="index.html"
              tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/index.html"
              >Home</a
            >
          </li>
          <li>/</li>
          <li><span>Products</span></li>
        </ul>
      </div>
    </section>
    <section class="products-page">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-3">
            <div class="product-sidebar">
              <div
                class="product-sidebar__single product-sidebar__search-widget"
              >
                <form action="#">
                  <el-input
                    type="text"
                    v-model="keyword"
                    placeholder="关键字搜索"
                  />
                  <button
                    class="organik-icon-magnifying-glass"
                    type="submit"
                    @click="onFilter()"
                  ></button>
                </form>
              </div>
              <div class="product-sidebar__single">
                <h3>价格</h3>
                <div class="product-sidebar__price-range">
                  <el-slider v-model="price" range show-stops :max="100">
                  </el-slider>
                  <div class="form-group">
                    <div class="left">
                      <p>
                        $
                        <span id="min-value-rangeslider">{{ price[0] }}</span>
                      </p>
                      <span>-</span>
                      <p>
                        $
                        <span id="max-value-rangeslider">{{ price[1] }}</span>
                      </p>
                    </div>
                    <div class="right">
                      <input
                        type="submit"
                        class="thm-btn"
                        value="过滤"
                        @click="onFilter()"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div class="product-sidebar__single">
                <h3>标签名</h3>
                <ul class="list-unstyled product-sidebar__links">
                  <li :key="category.id" v-for="category in categories">
                    <el-button @click="getCategory(category)"
                      >{{ category.name }}
                      <i
                        v-if="category.id == queryWrappe.categoryId"
                        class="fa fa-angle-right"
                      ></i
                    ></el-button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-12 col-lg-9">
            <div class="product-sorter">
              <p>Showing 1–9 of 12 results</p>
              <div class="product-sorter__select">
                <el-select
                  v-model="orderBy"
                  placeholder="请选择排序条件"
                  class="selectpicker"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @click="onFilter()"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="row">
              <div
                class="col-md-6 col-lg-4"
                :key="goods.id"
                v-for="goods in goodses"
              >
                <div class="product-card">
                  <div class="product-card__image">
                    <img :src="goods.image" alt="" />
                    <div class="product-card__image-content">
                      <a href="#"><i class="organik-icon-heart"></i></a>
                      <a
                        href="#"
                        @click.prevent="joinCart(goods)"
                        tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/product.html"
                        ><i class="organik-icon-shopping-cart"></i
                      ></a>
                    </div>
                  </div>
                  <div class="product-card__content">
                    <div class="product-card__left">
                      <h3>
                        <a :href="'product-details.html?id=' + goods.id">{{
                          goods.name
                        }}</a>
                      </h3>
                      <p>$ {{ goods.price }}</p>
                    </div>
                    <div class="product-card__right">
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="text-center">
              <a
                href="#"
                class="thm-btn products__load-more"
                @click.prevent="loadMore()"
                >显示更多</a
              >
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { listCategory } from "@/api/category";
import { recently, filter } from "@/api/goods";
/* eslint-disable */
export default {
  data() {
    return {
      categories: [],
      goodses: [],
      options: [
        {
          value: "id",
          label: "根据商品ID排序",
        },
        {
          value: "on_time",
          label: "根据上架时间排序",
        },
      ],
      price: [0, 50],
      keyword: "",
      orderBy: "",
      category: "",
      limit: 6,
      queryWrappe: {
        orderBy: "",
        categoryId: "",
        priceMin: "",
        priceMax: "",
        keyWord: "",
        limit: 6,
      },
      CKEY: "BANDEER_CITY_CART",
      carts: null,
      goods: null,
    };
  },
  watch: {
    orderBy() {
      this.onFilter();
    },
  },
  mounted() {
    // P1 任务：加载分类
    let p1 = new Promise((resolve) => {
      listCategory().then((categories) => {
        console.log(categories);
        this.categories = categories;
        resolve(true);
      });
    });
    // P2 任务：加载商品
    let p2 = new Promise((resolve) => {
      recently().then((goodses) => {
        this.goodses = goodses;
        console.log(goodses);
        resolve(true);
      });
    });
    // 当所有的任完成之后, 执行如下回调函数
    Promise.all([p1, p2]).then(() => {
      console.log("初始化完成");
    });
  },
  methods: {
    // 传给父Main.vue
    joinCart(goods) {
      console.log(this.$parent);
      this.$parent.goods = JSON.parse(JSON.stringify(goods));
      // this.goods = goods;
    },
    getCategory(val) {
      this.category = val;
      this.queryWrappe.categoryId = this.category.id;
      this.onFilter();
    },
    loadMore() {
      this.limit += 6;
      this.onFilter();
    },
    onFilter() {
      this.queryWrappe.priceMin = this.price[0];
      this.queryWrappe.priceMax = this.price[1];
      this.queryWrappe.orderBy = this.orderBy;
      this.queryWrappe.categoryId = this.category.id;
      this.queryWrappe.keyWord = this.keyword;
      this.queryWrappe.limit = this.limit;

      console.log(this.queryWrappe);
      filter(this.queryWrappe).then((res) => {
        console.log(res);
        this.goodses = res;
      });
    },
  },
};
</script>

<style scoped>
</style>